
<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <title> - jsFiddle demo by hakim</title> 
  
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-nocompat.js'></script> 
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
  <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
  
  <style type='text/css'> 
    
  </style> 
  
 
 
<script type='text/javascript'>//<![CDATA[ 
window.addEvent('load', function() {
/* Original code:
 
var d = document,
    canvas = d.body.appendChild( d.createElement( 'canvas' ) ),
    context = canvas.getContext( '2d' ),
    time = 0,
    w = canvas.width = innerWidth,
    h = canvas.height = innerHeight,
    m = Math,
    cos = m.cos,
    sin = m.sin,
    PI = m.PI
 
// The main animation loop
setInterval( function() {
    // Clear
    canvas.width = canvas.width;
 
    time += .1;
 
    // The number of particles to generate
    i = 10000
 
    while( i-- ) {
        // The magic
        r =  (w+h)/2 * ( cos( ( time + i ) * ( .05 + ( sin(time/100000) / PI  * .2 ) ) ) / PI )
 
        context.fillRect( sin(i) * r + w/2,
                          cos(i) * r + h/2,
                          1.5,
                          1.5 )
    }
}, 16 )
*/
});//]]>  
 
</script> 
 
 
</head> 
<body> 
  <!-- 317 bytes --> 
<script> 
var a=document,b=a.body.appendChild(a.createElement("canvas")),c=b.getContext("2d"),d=10000,e=b.width=innerWidth,f=b.height=innerHeight,g=Math,h=g.cos,j=g.sin,k=g.PI;setInterval(function(){b.width=b.width;d+=0.1;for(i=1E4;i--;)r=(e+f)/2*(h((d+i)*(0.05+0.2*(j(d/1E5)/k)))/k),c.fillRect(j(i)*r+e/2,h(i)*r+f/2,1.5,1.5)},1);
</script> 
  
</body> 
 
 
</html> 
 